<template>
	<el-dialog v-model="dialogVisible" title="分配按钮权限" width="30%">
		<view v-for="(item,index) in menu" :key="index">
			<template v-if="item.apis">
				<view class="title">{{item.name}}</view>
				<el-checkbox-group v-model="checkedApis" @change="handleCheckedCitiesChange">
					<el-checkbox v-for="i in item.apis" :key="i.value" :label="i.label"
						:value="i.value">{{ i.label }}</el-checkbox>
				</el-checkbox-group>
			</template>
		</view>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirm">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import router from '@/router';
	const dialogVisible = ref(false);
	const menu = ref(router);
	const checkedApis = ref([]);// 选中的api

	const showModal = () => {
		dialogVisible.value = true;
	};

	const confirm = () => {
		dialogVisible.value = false;
		//接口请求...
	}
	const handleCheckedCitiesChange  = () =>{
		console.log(checkedApis.value)
	}
	defineExpose({
		showModal
	});
</script>
<style scoped>
	.title {
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0 5px 0;

	}
</style>